<script setup lang="ts">
import { ref } from 'vue'
import CNav from '@/components/CNav.vue'
import { ImageAddHttp } from '@/utils/index'
import CTweetCard from '@/components/CTweetCard.vue'
import { useScript } from './hook'

const modal = ref()

const {
  dataList,
  msgNum,
  mes_typpe,
  isRefreshing,
  userInfo,
  selfInfo,
  ModelContent,
  refreshEmabled,
  gotoUserInfo,
  loadMoreComments,
  refreshComments,
  Back,
  confirm,
  newMsg,
  allMsg,
  onCollect,
  onLike,
  publish,
  cardHandle,
  deleteCard,
} = useScript(modal)
</script>
<template>
  <view class="container">
    <CNav left-text="返回" @left-click="Back()" title="个人资料" />

    <uv-modal
      ref="modal"
      title="删除该信息"
      :content="ModelContent"
      confirm-text="确定"
      :show-cancel-button="true"
      :async-close="true"
      @confirm="confirm"
    ></uv-modal>

    <view class="page-content">
      <view class="profile-header">
        <view class="profile-info" @tap="gotoUserInfo(0)">
          <image v-if="userInfo" class="profile-avatar" :src="ImageAddHttp(userInfo.avatar)" />
          <text class="profile-name">{{ userInfo?.nickname }}</text>
        </view>
        <text class="profile-bio"> {{ userInfo?.bio }} </text>
      </view>
      <!-- flex布局 按钮组 按钮我得收藏 我得喜欢 发布新文 -->
      <uv-divider
        v-if="selfInfo?.id !== userInfo?.id && dataList.length > 0"
        text="分割线"
        :dot="true"
      ></uv-divider>
      <view v-if="selfInfo?.id === userInfo?.id" class="post-btns">
        <view class="btn" @click="allMsg">
          <text class="icon">📜</text>
          <text class="label">所有</text>
        </view>
        <!-- 收藏按钮 -->
        <view class="btn" @click="onCollect">
          <text class="icon">🔖</text>
          <text class="label">收藏</text>
        </view>

        <!-- 喜欢按钮 -->
        <view class="btn" @click="onLike">
          <text class="icon">❤️</text>
          <text class="label">喜欢</text>
        </view>

        <!-- 最新消息 -->
        <view class="btn" @click="newMsg">
          <text class="icon">🔔</text>
          <text class="label">最新消息</text>
          <view class="new_msg_box">
            <uv-badge type="error" max="99" :value="msgNum"></uv-badge>
          </view>
        </view>

        <!-- 发布新文按钮 -->
        <view class="btn" @click="publish">
          <text class="icon">📝</text>
          <text class="label">发布新文</text>
        </view>
      </view>
    </view>
    <view v-if="dataList.length === 0 && selfInfo!.id === userInfo?.id" style="padding: 10px">
      <uv-empty mode="message" icon="https://cdn.uviewui.com/uview/empty/message.png"></uv-empty>
      <uv-button
        v-if="mes_typpe === 0"
        style="padding-top: 30px"
        type="primary"
        text="发布第一条动态"
        @click="publish"
      ></uv-button>
    </view>

    <scroll-view
      v-else
      class="comments-section"
      :scroll-y="true"
      :refresher-enabled="refreshEmabled && !isRefreshing"
      :refresher-triggered="isRefreshing"
      @scrolltolower="loadMoreComments"
      @refresherrefresh="refreshComments"
    >
      <CTweetCard
        v-for="card in dataList"
        :id="card.id"
        :user_id="card.user_id"
        :key="card.id"
        :avatar="card.avatar"
        :name="card.nickname"
        :handle="card.username"
        :time="(card.createtime as string)"
        :content="card.content"
        :is-liked="card.is_liked"
        :is-collected="card.is_collected"
        :is-delete="selfInfo!.id === userInfo?.id && mes_typpe === 0"
        @gotoinfo="gotoUserInfo"
        @card-handle="cardHandle(card)"
        @delete="deleteCard(card.id)"
      ></CTweetCard>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;

  .comments-section {
    overflow-y: scroll;
    flex: 1;
  }
  .page-content {
    padding: 20px;
    padding-bottom: 1px;
    .profile-header {
      margin-bottom: 20px;
      text-align: left;
      .profile-info {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        width: 100%;
        .profile-avatar {
          margin-right: 15px; /* 设置头像和用户名之间的间距 */
          border-radius: 50%;
          width: 60px; /* 调整头像大小 */
          height: 60px;
          background-color: #e0e0e0;
        }
        .profile-name {
          font-weight: bold;
          font-size: 24px;
        }
      }
      .profile-bio {
        padding: 0 20px;
        font-size: $uni-font-size-base;
        color: $uni-text-color;
      }
    }
    .post-card {
      margin-bottom: 20px;
      padding: 15px;
      border-radius: 10px;
      width: 90%;
      background-color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .post-btns {
      display: flex;
      justify-content: space-around; /* 让按钮水平分布 */
      padding: 0 0 10px;
      border-bottom: 1px solid #e0e0e0;
      background-color: #fff;
    }
    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      position: relative;
      .icon {
        margin-bottom: 5px;
        font-size: $uni-icon-size-base; /* 图标大小 */
      }
      .label {
        font-weight: bold;
        font-size: $uni-font-size-base; /* 标签文字大小 */
        color: $uni-text-color-grey;
      }
      .new_msg_box {
        position: absolute;
        top: -5px;
        right: -5px;
        pointer-events: none;
      }
    }
  }
}
</style>
